<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div class="header">
        <div>
          <el-button type="danger" @click="addAgentDialogVisible=true">加代理</el-button>
          <el-button :type="searchTerms.status===0?'primary':''" @click="searchTerms.status=0,currentPage=1,getData({})">我的客户</el-button>
          <el-button :type="searchTerms.status===1?'primary':''" @click="searchTerms.status=1,currentPage=1, getData({})">待审核客户（{{ examineTotal }}）</el-button>
          <!--<el-select v-model="searchTerms['client_type']" class="select" placeholder="客户类型" clearable @change="getData">
            <el-option value="new" label="新拓"/>
            <el-option value="assign" label="指定"/>
            <el-option value="old" label="存量"/>
          </el-select>-->
          <!--<el-select v-model="searchTerms['project_type']" class="select" placeholder="项目类型" clearable @change="getData">
            <el-option value="self" label="自拓项目"/>
            <el-option value="platform" label="合作项目"/>
            <el-option value="repeat" label="复算项目"/>
          </el-select>-->
          <!--<el-select v-model="searchTerms['arrears']" class="select" placeholder="是否欠费" clearable @change="getData">
            <el-option :value="1" label="欠费"/>
            <el-option :value="0" label="不欠费"/>
          </el-select>-->

          <el-select v-model="searchTerms['sales_uin']" :clearable="$store.getters.id===1||queryMatch(268)" filterable class="select" placeholder="业务员" @change="getData">
            <el-option v-for="(item, index) in salerList" :key="index" :label="`业务员：${item.sales_name}`" :value="item.sales_uin"/>
          </el-select>
        </div>
        <div>
          <el-input v-model="searchTerms.searchValue" placeholder="请输入内容" class="input-with-select search-input" @change="getData">
            <el-select slot="prepend" v-model="searchTerms.searchSelected" class="search-select">
              <el-option :value="0" label="客户账号ID"/>
              <el-option :value="1" label="客户名称"/>
              <!--<el-option :value="2" label="客户备注"/>-->
              <!--<el-option v-if="$store.getters.id===1||queryMatch(268)" :value="3" label="业务员"/>-->
            </el-select>
          </el-input>
          <el-button type="success" class="do-btn" icon="el-icon-search" @click="getData">搜索</el-button>
        </div>
      </div>
      <!--已审核-->
      <el-table v-loading="tableLoading" v-if="searchTerms.status===0" key="table1" :data="tableData" :max-height="tableMaxHeight" class="tx-customer" border highlight-current-row @sort-change="handleSortChange">
        <el-table-column prop="ClientUin" label="客户账号ID" min-width="160" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.row.ClientUin }}
            <div class="flex-row" style="justify-content: center;">
              <el-tooltip :content="scope.row.ClientRemark||'--'" effect="dark" placement="top">
                <div class="remarks">{{ scope.row.ClientRemark?scope.row.ClientRemark:'--' }}</div>
              </el-tooltip>
              <el-button type="text" class="el-icon-edit" @click="editClientRemark(scope.row)"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="名称" width="140" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.row.ClientName?scope.row.ClientName:'--' }}
          </template>
        </el-table-column>
        <el-table-column prop="ClientFlag" label="客户类型" width="120" header-align="center" align="center">
          <template slot="header" slot-scope="scope">
            <el-dropdown @command="handleCustomerTypeCommand">
              <span class="el-dropdown-link">
                客户类型<i class="el-icon-arrow-down el-icon--right"/>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="">全部</el-dropdown-item>
                <el-dropdown-item command="new">新拓</el-dropdown-item>
                <el-dropdown-item command="assign">指定</el-dropdown-item>
                <el-dropdown-item command="old">存量</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <template slot-scope="scope">
            {{ scope.row.ClientType==='new'?'新拓':scope.row.ClientType==='assign'?'指定':scope.row.ClientType==='old'?'存量':'--' }}
          </template>
        </el-table-column>
        <el-table-column label="客户级别&余额" min-width="120" header-align="center" align="center">
          <template slot="header" slot-scope="scope">
            <div @click="getAllCustomerGradeAndBalance">
              <span>客户级别&余额</span>
              <svg-icon icon-class="eye" style="cursor: pointer;"/>
            </div>
          </template>
          <template slot-scope="scope">
            <div v-loading="scope.row.loading" v-if="!scope.row.grade" @click="getCustomerGradeAndBalance(scope.row)">
              <svg-icon icon-class="eye" style="cursor: pointer;" />
            </div>
            <div v-else>
              <!--<div>级别：{{ scope.row.grade }}</div>-->
              <!--<div>余额：￥{{ scope.row.balance }}</div>-->
              <el-tag size="small" effect="dark">{{ scope.row.grade }}&nbsp;￥{{ scope.row.balance }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <!--<el-table-column label="项目类型" min-width="120" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.row.ProjectType==='self'?'自拓项目':(scope.row.ProjectType==='platform'?'合作项目':scope.row.ProjectType==='repeat'?'复算项目':'&#45;&#45;') }}
          </template>
        </el-table-column>-->
        <el-table-column label="邮箱" min-width="120" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.row.Mail?scope.row.Mail:'--' }}
          </template>
        </el-table-column>
        <el-table-column label="是否欠费" min-width="100" header-align="center" align="center">
          <template slot="header" slot-scope="scope">
            <el-dropdown @command="handleHasOverCommand">
              <span class="el-dropdown-link">
                是否欠费<i class="el-icon-arrow-down el-icon--right"/>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="">全部</el-dropdown-item>
                <el-dropdown-item command="Y">欠费</el-dropdown-item>
                <el-dropdown-item command="N">不欠费</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <template slot-scope="scope">
            {{ scope.row.HasOverdueBill?'是':'否' }}
          </template>
        </el-table-column>
        <!--<el-table-column prop="balance" label="余额" min-width="100" header-align="center" align="center"/>-->
        <el-table-column prop="LastMonthAmt" label="上月消费" min-width="110" header-align="center" align="center" sortable>
          <template slot-scope="scope">
            {{ (scope.row.LastMonthAmt!==null&&scope.row.LastMonthAmt!==''&&scope.row.LastMonthAmt)?(scope.row.LastMonthAmt/100).toFixed(2):'--' }}
          </template>
        </el-table-column>
        <el-table-column prop="ThisMonthAmt" label="本月消费" min-width="110" header-align="center" align="center" sortable>
          <template slot-scope="scope">
            {{ (scope.row.ThisMonthAmt!==null&&scope.row.ThisMonthAmt!==''&&scope.row.ThisMonthAmt)?(scope.row.ThisMonthAmt/100).toFixed(2):'--' }}
          </template>
        </el-table-column>
        <el-table-column label="业务员" width="120" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.row.SalesName?scope.row.SalesName:'--' }}
          </template>
        </el-table-column>
        <el-table-column prop="AgentTime" label="关联时间" min-width="160" header-align="center" align="center" sortable>
          <template slot-scope="scope">
            {{ scope.row.AgentTime?parseTime(scope.row.AgentTime, '{y}-{m}-{d} {h}:{i}:{s}'):'--' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="160" header-align="center" align="center" sortable>
          <template slot-scope="scope">
            <el-button type="text" @click="$router.push(`/tencent/order?customerId=${scope.row.ClientUin}`)">客户订单</el-button>
            <el-button v-if="queryMatch(270)" type="text" @click="showTransferAccountDialog(scope.row)">转账</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--// 未审核客户-->
      <el-table v-loading="tableLoading" v-if="searchTerms.status===1" key="table2" :data="tableData" :max-height="tableMaxHeight" border highlight-current-row @sort-change="handleSortChange">
        <el-table-column prop="ClientUin" label="客户账号ID" min-width="140" header-align="center" align="center"/>
        <!--<el-table-column label="客户类型" min-width="120" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.row.ClientFlag }}类
          </template>
        </el-table-column>-->
        <el-table-column prop="Phone" label="手机号" min-width="140" header-align="center" align="center"/>
        <el-table-column prop="Mail" label="邮箱" min-width="140" header-align="center" align="center"/>
        <el-table-column label="是否欠费" min-width="100" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.row.HasOverdueBill?'是':'否' }}
          </template>
        </el-table-column>
        <el-table-column label="审核状态" min-width="100" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.row.Status===1?'待代理商审核':'待腾讯云审核' }}
          </template>
        </el-table-column>
        <el-table-column prop="ApplyTime" label="申请时间" min-width="160" header-align="center" align="center" sortable>
          <template slot-scope="scope">
            {{ scope.row.ApplyTime?parseTime(scope.row.ApplyTime, '{y}-{m}-{d} {h}:{i}:{s}'):'--' }}
          </template>
        </el-table-column>
        <el-table-column prop="SalesName" label="业务员" min-width="140" header-align="center" align="center"/>
        <el-table-column label="操作" min-width="120" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="toRediv(scope.row)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        class="pagination"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"/>
    </el-card>
    <!--审核窗口-->
    <el-dialog :visible.sync="redivDialogVisible" title="审核客户" width="480px" class="dialog" center>
      <el-form label-width="60px">
        <el-form-item label="理由" prop="description">
          <el-input v-model="dialogData.Note" type="textarea" rows="3"/>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="doRediv('reject')">拒绝</el-button>
        <el-button type="primary" @click="doRediv('accept')">同意</el-button>
      </div>
    </el-dialog>
    <!--加代理窗口-->
    <el-dialog :visible.sync="addAgentDialogVisible" title="邀请客户" width="480px" class="dialog" center>
      <el-row class="add-agent-dialog">
        <div v-if="addAgentDialogData.invite_url">{{ $store.getters.userInfo.name }}：{{ addAgentDialogData.invite_url }}</div>
        <div class="title">请将邀请链接发送给您的客户,客户同意邀请后请及时审核</div>
        <div class="input">
          <el-input :value="addAgentDialogData.tencent_invite_url" readonly/>
          <!--<el-button type="info">复制链接</el-button>-->
        </div>
        <div class="image">
          <img :src="addAgentDialogData.tencent_big_qr">
          <div>
            <h4>邀请二维码</h4>
            <div><el-button type="text" @click="downsQRCodeImage(0)">小尺寸下载 </el-button> 258*258px，适合网络分享</div>
            <div><el-button type="text" @click="downsQRCodeImage(1)">大尺寸下载 </el-button> 1280*1280px，适合海报印制</div>
          </div>
        </div>
      </el-row>
      <div slot="footer">
        <el-button type="primary" class="bg-green" @click="addAgentDialogVisible=false">确定</el-button>
      </div>
    </el-dialog>
    <!--转账窗口-->
    <el-dialog :visible.sync="transferAccountDialogVisible" title="转账" width="480px" class="dialog" center>
      <el-form label-width="120px">
        <el-form-item label="客户账号" prop="description">
          {{ transferAccountData.clientUin }}
        </el-form-item>
        <el-form-item label="客户名称" prop="description">
          {{ transferAccountData.clientName }}
        </el-form-item>
        <el-form-item label="业务员" prop="description">
          {{ transferAccountData.salesName }}
        </el-form-item>
        <el-form-item label="转出金额" prop="description">
          <el-input v-model="transferAccountData.amount" type="number" min="0" style="width: 160px;"/>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="warning" @click="showConfirmDialog">转账</el-button>
        <el-button @click="transferAccountDialogVisible=false">取消</el-button>
      </div>
      <el-dialog
        :visible.sync="confirmTransferDialogVisible"
        class="confirm-box"
        width="480px"
        title="转账风险确认"
        append-to-body>
        <div class="content">
          <div class="value">
            <div>尊敬的腾讯云合作伙伴，因转账功能存在财票风险，请详细阅读该功能操作的风险，并与转账收款的客户确认对此无异议。</div>
            <div><span>风险一：</span>转账成功金额，可以立即申请合作伙伴抬头的发票，不需要等客户将现金消耗才开票，所以相应的，收款客户可开发票金额会被减少，直到把转账金额消耗完才会恢复到原有可开发票金额。（注：按充值开票客户，收到转账后可开发票金额无影响）</div>
            <div><span>风险二：</span>为规避相关风险，转账流程严格按照法务内审设计；同时，转账流程涉及复杂的业绩计算与发票逻辑。因此，一经转账绝不退还或撤回，也不允许收款方提现。</div>
            <div><span>风险三：</span>如代客账户内已有充值现金需提现，请务必在转账前完成提现，否则只能将合作伙伴转账的所有金额消耗完毕后，才能够提现代客充值的金额。</div>
          </div>
          <div class="check">
            <el-checkbox v-model="confirmBoxCheck" class="checkbox">我已确认以上风险，并与转账收款客户沟通确认对此无异议。</el-checkbox>
          </div>
          <div slot="footer" style="text-align: center">
            <el-button :disabled="!confirmBoxCheck||confirmBoxBtnLoading" :loading="confirmBoxBtnLoading" :class="{'bg-green': confirmBoxCheck}" type="info" @click="doTransferAccount">确认转账</el-button>
            <el-button @click="confirmTransferDialogVisible=false">取消</el-button>
          </div>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { handleSortChange, handleSizeChange, handleCurrentChange, parseTime } from '@/utils/table'
export default {
  data() {
    return {
      searchTerms: {
        status: 0,
        clientFlag: null,
        client_type: null,
        project_type: null,
        arrears: null,
        hasOverdueBill: null,
        searchValue: '',
        searchSelected: 0,
        sales_uin: ''
      },
      // 业务员列表
      salerList: [],

      // b类客户审核弹窗
      redivDialogVisible: false,
      dialogData: {
        ClientUin: '',
        AuditResult: '',
        Note: ''
      },

      // 加代理弹窗
      addAgentDialogVisible: false,
      addAgentDialogData: {
        tencent_invite_url: '未配置',
        tencent_big_qr: '',
        tencent_small_qr: '',
        invite_url: ''
      },

      // 表格相关数据
      tableMaxHeight: document.documentElement.clientHeight - 300,
      tableLoading: false,
      currentPage: 1,
      pageSize: this.$store.getters.userInfo.pageSize,
      pageSizes: [20, 50, 300, 500, 1000],
      total: 0,
      tableData: [],
      examineTotal: 0,

      // 转账弹窗
      transferAccountDialogVisible: false,
      confirmTransferDialogVisible: false,
      confirmBoxCheck: false,
      confirmBoxBtnLoading: false,
      transferAccountData: {
        salesName: '',
        balance: '',
        clientName: '',
        clientUin: '',
        amount: ''
      }
    }
  },
  created() {
    this.getSalerList();
    this.getInviteInfo();
  },
  methods: {
    handleCurrentChange, handleSizeChange, handleSortChange, parseTime,
    // 根据审核的类型获取对应的列表
    getData(order) {
      this.tableLoading = true
      const data = {
        page_no: this.currentPage,
        page_size: this.pageSize,
        search: this.searchTerms.searchValue,
        client_flag: this.searchTerms.clientFlag,
        client_type: this.searchTerms.client_type,
        project_type: this.searchTerms.project_type,
        arrears: this.searchTerms.arrears,
        sales_uin: this.searchTerms.sales_uin
      }
      order.sortName && (data.sortName = order.sortName)
      order.sortOrder && (data.sortOrder = order.sortOrder)
      if (this.searchTerms.searchSelected === 0) {
        data.client_uin = this.searchTerms.searchValue
      } else if (this.searchTerms.searchSelected === 1) {
        data.client_name = this.searchTerms.searchValue
      } else if (this.searchTerms.searchSelected === 2) {
        data.client_remark = this.searchTerms.searchValue
      } else if (this.searchTerms.searchSelected === 3) {
        data.sales_name = this.searchTerms.searchValue
      }
      if (this.searchTerms.status === 0) {
        this.getCustomerExamine(data)
      } else {
        this.getCustomerBeAudited(data)
      }
    },

    // 加载业务员列表
    getSalerList() {
      const url = 'tencent/getSaleByUser'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.salerList = res.data;
        if (this.salerList.length > 0) {
          if (this.$store.getters.id !== 1 && !this.queryMatch(268)) {
            this.searchTerms.sales_uin = this.salerList[0].sales_uin;
          }
          this.getData({});
        } else if (this.$store.getters.id === 1 || this.queryMatch(268)) {
          this.getData({});
        }
      }).catch(e => {
        this.tableLoading = false
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    handleCustomerTypeCommand(command) {
      this.searchTerms.client_type = command;
      this.getData({});
    },
    handleHasOverCommand(command) {
      this.searchTerms.arrears = command === 'Y' ? 1 : 0;
      this.getData({});
    },
    // 编辑客户备注
    editClientRemark(row){
      this.$prompt('请输入备注内容', '修改', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: row.ClientRemark
      }).then(({ value }) => {
        const url = 'tencent/modifyClientRemark';
        const data = { 'remark': value, 'clientUin': row.ClientUin };
        this.$store.dispatch('GetConnect', { url, data}).then(res => {
          row.ClientRemark = value;
          this.$message.success('修改成功')
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      })
    },
    // 加载加代理信息
    getInviteInfo(data) {
      const url = 'tencent/getInviteInfo'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.addAgentDialogData = res.data;
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },
    // 加载未审核列表
    getCustomerBeAudited(data) {
      this.searchTerms.status = 1
      this.tableLoading = true
      const url = 'tencent/customerBeAudited'
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.tableData = res.data.list
        this.total = parseInt(res.data.total)
        this.examineTotal = parseInt(res.data.total)
        this.tableLoading = false
      }).catch(e => {
        this.tableLoading = false
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },
    // 加载已审核列表
    getCustomerExamine(data) {
      this.searchTerms.status = 0
      this.tableLoading = true
      const url = 'tencent/customerExamine'
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.tableData = res.data.list
        this.total = parseInt(res.data.total)
        this.tableLoading = false
        const url = 'tencent/customerBeAudited'
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.examineTotal = parseInt(res.data.total)
        }).catch(e => {
          this.tableLoading = false
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      }).catch(e => {
        this.tableLoading = false
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },
    // 显示审核弹窗
    toRediv(row) {
      this.dialogData['ClientUin'] = row.ClientUin
      // b类客户的时候显示弹窗
      if (row.ClientFlag === 'b') {
        this.redivDialogVisible = true
      } else {
        this.$confirm('是否审核通过该客户?', '提示', {
          confirmButtonText: '同意',
          cancelButtonText: '拒绝',
          type: 'warning'
        }).then(() => {
          this.doRediv('accept')
        }).catch(() => {
          this.doRediv('reject')
        })
      }
    },
    // 执行审核操作
    doRediv(status) {
      const url = 'tencent/examineCustomer'
      const data = this.dialogData
      // 设置审核的结果
      data['AuditResult'] = status
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.$message.success('审核成功,状态' + status)
      }).catch(e => {
        this.$message.error(e.msg + '，请刷新或联系管理员')
      })
    },
    // 下载图片
    downsQRCodeImage(type) {
      const alink = document.createElement('a');
      alink.target = '_blank'
      if (type) {
        alink.href = 'https://crmweb.netbcloud.com/admin/download/file?token=' + this.$store.getters.token + '&url=' + this.addAgentDialogData.tencent_big_qr
      } else {
        alink.href = 'https://crmweb.netbcloud.com/admin/download/file?token=' + this.$store.getters.token + '&url=' + this.addAgentDialogData.tencent_small_qr
      }
      alink.download = 'tencentQR'
      alink.click()
    },
    // 获取客户等级和余额
    getCustomerGradeAndBalance(row) {
      row.loading = true;
      const url = 'tencent/getCustomerInfo'
      const data = {
        clientUin: row.ClientUin
      }
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        let temp = [];
        row.grade = res.data.grade || '--';
        row.balance = res.data.balance;
        temp = temp.concat(this.tableData);
        this.tableData = temp;
      }).catch(e => {
        this.$message.error(e.msg + '，请刷新或联系管理员')
      })
    },
    async getAllCustomerGradeAndBalance() {
      for (let i = 0; i < this.tableData.length; i++) {
        console.log(i)
        this.getCustomerGradeAndBalance(this.tableData[i]);
      }
    },

    showTransferAccountDialog(row) {
      // const url = 'tencent/getAccountBalance'
      // this.$store.dispatch('GetConnect', { url }).then(res => {
      //   this.transferAccountData = {
      //     balance: res.data.balance,
      //     clientName: row.ClientName,
      //     clientUin: row.ClientUin,
      //     amount: ''
      //   };
      //   this.transferAccountDialogVisible = true;
      // }).catch(e => {
      //   this.$message.error(e.msg + '，请刷新或联系管理员')
      // })
      this.transferAccountData = {
        salesName: row.SalesName,
        clientName: row.ClientName,
        clientUin: row.ClientUin,
        amount: ''
      };
      this.transferAccountDialogVisible = true;
    },

    showConfirmDialog() {
      if (this.transferAccountData.amount && this.transferAccountData.amount !== '0') {
        this.confirmTransferDialogVisible = true;
        this.confirmBoxBtnLoading = false;
      } else {
        this.$message.error('金额不能为空');
      }
    },
    doTransferAccount() {
      if (!this.confirmBoxBtnLoading) {
        const url = 'tencent/getAgentTransferMoney'
        const data = this.transferAccountData;
        this.confirmBoxBtnLoading = true;
        this.$store.dispatch('GetConnect', {url, data}).then(res => {
          this.$message.success('转账成功');
          this.confirmTransferDialogVisible = false;
          this.getData({});
        }).catch(e => {
          this.confirmTransferDialogVisible = false;
          this.confirmBoxBtnLoading = false;
          this.$message.error(e.msg + '，请刷新或联系管理员')
        })
      }
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../../styles/index.scss';
.box-1 {
  .header {
    @include flex-row(center, space-between);
    padding-bottom: 15px;
    flex-wrap: wrap;
    > div {
      @include flex-row(center, flex-start);
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .select {
      margin-left: 15px;
      width: 140px;
    }
    .search-input {
      width: 400px;
      .search-select{
        width: 120px;
      }
    }
    .do-btn {
      @extend .bg-green;
      margin-left: 6px;
    }
  }
}
.dialog {
  .content {
    text-align: center;
  }
}
.el-tag {
  cursor: pointer;
}

  .add-agent-dialog{
    .title{
      font-weight: 600;
      line-height: 50px;
    }
    .input{
      margin-bottom: 20px;
      .el-input{
        width: 380px;
      }
    }
    .image{
      display: flex;
      flex-direction: row;
      align-items: center;
      img{
        width: 120px;
        height: 120px;
        margin-right: 20px;
      }
    }
  }
.remarks{
  font-size: 12px;
  color: $textGray;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.el-table td {
  .el-button{
    padding: 2px 0;
  }
}
.confirm-box .content .value >div{
  margin-bottom: 10px;
  color: #434343;
  line-height: 30px;
}
.confirm-box .content .value >div >span{
  font-weight: 600;
  color: #000;
}
.confirm-box .content .check{
  margin: 20px 0;
}
</style>
<style>
  .tx-customer.el-table td, .el-table th{
    padding: 0;
  }
</style>
